<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Menu as IconMenu,
  Document,
  Upload,
  User,
  ChatDotRound
} from '@element-plus/icons-vue'

const router = useRouter()
const isCollapse = ref(false)

const handleSelect = (key) => {
  router.push(key)
}

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

defineExpose({
  isCollapse
})
</script>

<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical"
      :collapse="isCollapse"
      @select="handleSelect"
      background-color="#001529"
      text-color="#fff"
      active-text-color="#409EFF">
      <el-menu-item index="/home">
        <el-icon><Document /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-menu-item index="/upload">
        <el-icon><Upload /></el-icon>
        <template #title>文档上传</template>
      </el-menu-item>
      <el-menu-item index="/knowledge">
        <el-icon><ChatDotRound /></el-icon>
        <template #title>知识库管理</template>
      </el-menu-item>
      <el-menu-item index="/avatar">
        <el-icon><User /></el-icon>
        <template #title>数字人设置</template>
      </el-menu-item>
    </el-menu>
    
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="toggleCollapse">
      <el-icon><IconMenu /></el-icon>
    </div>
  </el-aside>
</template>

<style scoped>
.sidebar {
  background-color: #001529;
  transition: width 0.3s;
  height: 100%;
  overflow: hidden;
}

.el-menu-vertical {
  border-right: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

/* 折叠按钮样式 */
.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.collapse-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>